<template>
    <div class="loginWarp">
      <div class="loginDiv">
        <var-row>
          <var-col class="h-full" :span="12">
            <var-image :src="bgImg" />
          </var-col>
          <var-col class="h-full" :span="12">
            <div class="p-2 w-full h-full bg-light-100 shadow-2xl">
              <h2
                class="my-2 text-sm subpixel-antialiased font-bold text-gray-500"
              >
                请注册
              </h2>
              <var-form class="px-2 text-left" ref="form">
                <var-space direction="column" class="mt-4" :size="[14, 0]">
                  <var-input
                    :hint="false"
                    :line="false"
                    placeholder="请输入手机号"
                    v-model="formData.phone"
                    focus-color="#38d39f"
                    blur-color="#d9d9d9"
                  >
                    <template #prepend-icon>
                      <var-icon
                        class="mr-2"
                        color="#d9d9d9"
                        name="account-circle-outline"
                      />
                    </template>
                  </var-input>
                  <var-input
                    :hint="false"
                    :line="false"
                    type="password"
                    placeholder="请输入密码"
                    v-model="formData.password"
                    focus-color="#38d39f"
                    blur-color="#d9d9d9"
                  >
                    <template #prepend-icon>
                      <var-icon class="mr-2" color="#d9d9d9" name="minus-box" />
                    </template>
                  </var-input>
                  <var-space justify="align" size="small" class="text">
                  <var-checkbox v-model="formDataLike"></var-checkbox>
                  我已阅读并同意<var-link type="primary" to="/Protocol"> 《服务协议》</var-link>和<var-link type="primary" to="/Privacy">《隐私政策》</var-link>
                </var-space>
                  <var-button
                    class="w-full"
                    block
                    type="success"
                    @click="handleClick"
                    >注 册</var-button
                  >
                </var-space>
              </var-form>
              <var-button class="btntext" text type="primary"  @click="handleGo">有账号？赶紧去登录</var-button>
            </div>
          </var-col>
        </var-row>
      </div>
    </div>
    
  </template>
  
  <script setup>
  import bgImg from "@/assets/images/bg.svg";
  import { reactive, onMounted,ref } from "vue";
  import { postData } from "@/utils/api";
  import { loginStore } from "@/store/user";
  import { useRouter } from "vue-router";
  import socket from "@/utils/socket.js";
  const MRouter = useRouter();
  const store = loginStore();
  const formDataLike = ref(false)
  const formData = reactive({
    phone: "",
    password: "",
  });
  const actions = {
  confirm: () => formDataLike.value = true,
  cancel: () => Snackbar['warning']("请先勾选同意再注册"),
}
  const oBshow = ref(false)
  let user = "";
  if (store.getUserInfo?.userInfo == undefined) {
    user = store.getUserInfo;
  } else {
    user = JSON.parse(store.getUserInfo?.userInfo);
  }
  onMounted(() => {
    socket.on("connect", () => {
      console.log("socketio-connect");
    });
    if(!user){
      oBshow.value = true
    }
  });
  const handleClick = async() => {
    if(formDataLike.value != ''){
    postData("student/register", { ...formData }).then((res) => {
      const {code,msg, data } = res.data;
      console.log(res)
      Snackbar['warning'](msg)
      if(code == 0){
        Snackbar['success']("注册成功,前往登录页");
        MRouter.push({
        path: "/login",
      });
      }
      
    }); 
    }else{
      //Snackbar['warning']("请先勾选是否阅读了政策协议")
      actions[await Dialog({
      title:'',
      message:"注册前请您先阅读并同意《服务协议》和《隐私政策》",
      confirmButtonText:"同意",
      cancelButtonText:"不同意",
      confirmButtonTextColor:"#ff8800",
      cancelButtonTextColor:"#666"
    })]()
    };
  };
  const handleGo = ()=>{
    MRouter.push({
        path: "/login",
    });
  }
  </script>
  
  <style scoped>
  .loginWarp {
    background: url("@/assets/images/wave.png") no-repeat;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loginDiv {
    width: 75%;
    height: 80vh;
  }
  
  .loginDiv .var-row {
    /* h-full flex justify-center items-center */
    height: 100%;
    display: flex;
    display: flex;
    align-items: center;
  }
  :deep(.var-checkbox__text){
  font-size: 4px;
  line-height: 12px;
  color: #666;
}
.text{
  font-size: 4px;
  line-height: 12px;
  color: #666;
}
:deep(.var-checkbox__action){
  font-size: 4px;
  line-height: 12px;
  color: #666;
  padding: 0;
}
:deep(.var-link){
  font-size: 4px;
}
:deep(.var-checkbox-group__wrap){
  height: 6vw;
}
  .btntext{
    font-size: 6px;
  }
  
  </style>
  